import React, { Component } from "react";
import { AgGridReact } from "ag-grid-react";
import "ag-grid-community/dist/styles/ag-grid.css";
import "ag-grid-community/dist/styles/ag-theme-balham.css";

class GridExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      columnDefs: [
        {
          headerName: "Athlete",
          field: "athlete",
          minWidth: 150
        },
        {
          headerName: "Age",
          field: "age",
          minWidth: 50
        },
        {
          headerName: "Country",
          field: "country",
          minWidth: 120
        },
        {
          headerName: "Year",
          field: "year",
          minWidth: 90
        },
        {
          headerName: "Date",
          field: "date",
          minWidth: 110
        },
        {
          headerName: "Sport",
          field: "sport",
          minWidth: 110
        },
        {
          headerName: "Gold",
          field: "gold",
          minWidth: 100
        },
        {
          headerName: "Silver",
          field: "silver",
          minWidth: 100
        },
        {
          headerName: "Bronze",
          field: "bronze",
          minWidth: 100
        },
        {
          headerName: "Total",
          field: "total",
          minWidth: 100
        }
      ],
      rowData: [
        {
          athlete: "Michael Phelps",
          age: 23,
          country: "United States",
          year: 2008,
          date: "24/08/2008",
          sport: "Swimming",
          gold: 8,
          silver: 0,
          bronze: 0,
          total: 8
        },
        {
          athlete: "Michael Phelps",
          age: 19,
          country: "United States",
          year: 2004,
          date: "29/08/2004",
          sport: "Swimming",
          gold: 6,
          silver: 0,
          bronze: 2,
          total: 8
        },
        {
          athlete: "Michael Phelps",
          age: 27,
          country: "United States",
          year: 2012,
          date: "12/08/2012",
          sport: "Swimming",
          gold: 4,
          silver: 2,
          bronze: 0,
          total: 6
        },
        {
          athlete: "Natalie Coughlin",
          age: 25,
          country: "United States",
          year: 2008,
          date: "24/08/2008",
          sport: "Swimming",
          gold: 1,
          silver: 2,
          bronze: 3,
          total: 6
        },
        {
          athlete: "Aleksey Nemov",
          age: 24,
          country: "Russia",
          year: 2000,
          date: "01/10/2000",
          sport: "Gymnastics",
          gold: 2,
          silver: 1,
          bronze: 3,
          total: 6
        },
        {
          athlete: "Alicia Coutts",
          age: 24,
          country: "Australia",
          year: 2012,
          date: "12/08/2012",
          sport: "Swimming",
          gold: 1,
          silver: 3,
          bronze: 1,
          total: 5
        },
        {
          athlete: "Missy Franklin",
          age: 17,
          country: "United States",
          year: 2012,
          date: "12/08/2012",
          sport: "Swimming",
          gold: 4,
          silver: 0,
          bronze: 1,
          total: 5
        },
        {
          athlete: "Ryan Lochte",
          age: 27,
          country: "United States",
          year: 2012,
          date: "12/08/2012",
          sport: "Swimming",
          gold: 2,
          silver: 2,
          bronze: 1,
          total: 5
        }
      ],
      getRowHeight: function() {
        return currentRowHeight;
      }
    };
  }

  onGridReady = params => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    minRowHeight = 25;
    currentRowHeight = minRowHeight;
    params.api.sizeColumnsToFit();
  };

  onGridSizeChanged(params) {
    var gridHeight = document.getElementsByClassName("ag-body-viewport")[0].offsetHeight;
    var renderedRows = params.api.getRenderedNodes();
    if (renderedRows.length * minRowHeight >= gridHeight) {
      if (currentRowHeight !== minRowHeight) {
        currentRowHeight = minRowHeight;
        params.api.resetRowHeights();
      }
    } else {
      currentRowHeight = Math.floor(gridHeight / renderedRows.length);
      params.api.resetRowHeights();
    }
  }
  render() {
    return (
      <div style={{ width: "100%", height: "100%" }}>
        <div
          id="myGrid"
          style={{
            height: "100%",
            width: "100%"
          }}
          className="ag-theme-balham"
        >
          <AgGridReact
            columnDefs={this.state.columnDefs}
            rowData={this.state.rowData}
            getRowHeight={this.state.getRowHeight}
            onGridReady={this.onGridReady}
            onGridSizeChanged={this.onGridSizeChanged.bind(this)}
          />
        </div>
      </div>
    );
  }
}

var minRowHeight = 25;
var currentRowHeight = minRowHeight;

export default GridExample;
